<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="banner">
			<u-swiper :list="bannerList" height="332rpx" @change="change" @click="click"></u-swiper>
		</view>

		<!-- 功能集 -->
		<view v-for="item in functionList" class="func-container">
			<view class="func-title">{{item.name}}</view>
			<view class="func-list">
				<view v-for="jtem in item.children" class="func-item" @tap="goChat(jtem)">
					<image class="item-icon" src="https://img.js.design/assets/smartFill/img425164da758808.jpg"
						mode="aspectFill"></image>
					<view class="item-tip">{{jtem.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const functionApi = require("@/api/functionApi");

	export default {
		data() {
			return {
				bannerList: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				functionList: []
			}
		},
		onLoad() {
			functionApi.list().then(res => {
				console.log(res);
				this.functionList = res.data
			})
		},
		methods: {
			change() {

			},
			click() {

			},
			goChat(item) {
				uni.navigateTo({
					url: item.url + "?functionId=" + item.id
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f8fd;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.banner {
		width: 708rpx;
		height: 332rpx;
		border-radius: 22rpx;
	}

	.func-container {}

	.func-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		padding: 0 42rpx;
		justify-content: space-between;
	}

	.func-title {
		font-size: 44rpx;
		font-weight: 400;
		color: #000000;

		margin-top: 30rpx;
		margin-left: 18rpx;
	}

	.func-item {
		width: 286rpx;
		height: 178rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
		box-shadow: 1px 2px 4px 0px #baabab;

		display: flex;
		flex-direction: column;
		align-items: center;

		margin-top: 30rpx;
		margin-bottom: 30rpx;

		flex-basis: 40%;
	}

	.item-icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;

		margin-top: 14rpx;
	}

	.item-tip {
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;

		margin-top: 16rpx;
	}
</style>